import { defineComponent } from 'vue'
import useCollapsedState from './useCollapsedState'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue'
import './style.less'

export default defineComponent({
  name: 'CollapsedMenu',
  setup () {
    const { collapsed, toggleCollapsed } = useCollapsedState()

    return () => (
      <div class="collapsed-menu" onClick={toggleCollapsed}>
        { collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined /> }
      </div>
    )
  }
})
